<template>
<div>
   <div class= "screen">
    <div style= "width:30%">关键字筛选：
			<el-input type= "search" v-model="search" style= "width:70%" placeholder= "请输入关键字"></el-input>
		</div>     
   </div>

   <ApprovalSubmitForm
	  v-if="approvalSubmitFormShow"
	  :approvalSubmitFormShow.sync="approvalSubmitFormShow"
	  :approvalSubmitForm.sync="approvalSubmitForm"
	  @getData="getData"
	>
	</ApprovalSubmitForm>

<el-table
  border
  stripe
  :header-cell-style="{background:'#DCDFE6',color:'#000000'}"
  :data="tables.slice((currentPage-1)*pagesize,currentPage*pagesize)"
  style="width: 100%">
	<el-table-column
	  label="操作"
	  width="40">
	    <template slot-scope="scope">
	      <el-button v-if="scope.row.current_link =='待审批'" @click="handleEdit(scope.$index,scope.row)" type="text" size="small">审批</el-button>
	      <el-button v-else-if="scope.row.current_link=='待开通'" @click="handleEdit(scope.$index,scope.row)" type="text" size="small">竣工</el-button>
	      <el-button v-else="scope.row.current_link=='待验收'" @click="handleEdit(scope.$index,scope.row)" type="text" size="small">验收</el-button>
	    </template>
	  </el-table-column>
	<el-table-column align="center" sortable prop="squence" label="序号" min-width="60">
	</el-table-column>
	<el-table-column align="center" sortable prop="current_link" label="当前状态" min-width="60">
	</el-table-column>
	<el-table-column align="center" sortable prop="applicant_name" label="申请单位名称" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="applicant_addres" label="申请单位地址" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="unit_contact" label="单位联系人" width="60">
	</el-table-column>
	<el-table-column align="center" sortable prop="telephone" label="联系电话" width="100">
	</el-table-column>
	<el-table-column align="center" sortable prop="E_mail" label="E-mail" min-width="100">
	</el-table-column>
	<el-table-column align="center" sortable prop="business_system_name" label="业务系统名称" min-width="100">
	</el-table-column>
	<el-table-column align="center" sortable prop="interface_tel" label="接口人/电话" width="100">
	</el-table-column>
	<el-table-column align="center" sortable prop="cloud_machine_name" label="云主机名称" width="100">
	</el-table-column>
	<el-table-column align="center" sortable prop="operating_system_version" label="操作系统/版本" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="vCPU_number" label="vCPU/个" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="memory_G" label="内存/G" min-width="50">
	</el-table-column>
	<el-table-column align="center" sortable prop="data_disk" label="数据盘/G（分区）" min-width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="network" label="网络(IP/掩码/网关/VLAN)" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="firewall_policy" label="防火墙策略（源/目的IP/端口、协议）" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="remarks1" label="备注1" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="cluster_name" label="集群名" min-width="50">
	</el-table-column>
	<el-table-column align="center" sortable prop="node" label="节点" min-width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="server_IP" label="服务器IP" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="port_ID" label="端口号" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="VIP" label="VIP" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="remarks2" label="备注2" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="link_10G_quantity_requirement" label="10G链路数量/要求" min-width="50">
	</el-table-column>
	<el-table-column align="center" sortable prop="special_railway_line" label="专线链路" min-width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="pm_specifications" label="物理机规格" min-width="50">
	</el-table-column>
	<el-table-column align="center" sortable prop="pm_hostname" label="物理机主机名称" min-width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="pm_operating_system_version" label="物理机操作系统类型、版本" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="pm_network" label="物理机网络（IP/掩码/网关）" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="pm_firewall_policy" label="物理机防火墙策略（源/目的端口、协议）" width="120">
	</el-table-column>
	<el-table-column align="center" sortable prop="remarks3" label="备注3" min-width="50">
	</el-table-column>
	<el-table-column align="center" sortable prop="process" label="工单流程" min-width="175">
	</el-table-column>
  </el-table>

<div class="paginationClass">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20, 40]"
    :page-size="pagesize"
    layout="total, sizes,prev, pager, next"
    :total="tables.length"
    prev-text="上一页"
    next-text="下一页">
  </el-pagination>
</div>
  </div>
</div>
</template>


<script>
import axios from 'axios'
import {getCookie} from '@/utils/util'
import ApprovalSubmitForm from '@/components/page/ApprovalSubmitForm'
import Pagination from '@/components/Pagination'

export default {
  name:'orderData',
  components:{
    ApprovalSubmitForm,
  },
  data(){
    return{
      currentPage: 1, //默认显示页面为1
      pagesize: 5, //    每页的数据条数      
      search:'',
      whetherShow:false,
			cur_permission:'',
      orderData:[],
      approvalSubmitFormShow:false,
			approvalSubmitForm:{},
    }
  },
	computed: {
  // 实时监听表格
    tables: function() {
      const search = this.search
      if (search) {
        return this.orderData.filter((currentValue)=> {
          return JSON.stringify(currentValue).indexOf(search)> -1
          })
			}else{
				return this.orderData
      }
		}
  },
  mounted(){
    console.log('begin get data')
    this.getData();
  },
  methods: {
		
    handleSizeChange(size){
      this.pagesize = size;
    },
    //点击第几页
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    getData(){
      if (localStorage.getItem('cur_permission')!= ''){
				this.cur_permission = localStorage.getItem('cur_permission')
				console.log('check permission')
				console.log(this.cur_permission)
        axios.get('/api/pending/',{
					params:{
						permission:this.cur_permission,
					},
				})
        .then((res) => {
          this.orderData = res.data;
					console.log(this.orderData);
        })
        .catch((error)=>{
					console.log(error);
        })
				this.$forceUpdate();
      }
    },

    handleEdit(index, row) {
      this.approvalSubmitFormShow = true;
      this.approvalSubmitForm = Object.assign({}, row);
    },
    
  },
}
</script>

<style scoped>
  .el-form-item .el-input {
    width: 100px;
  }
  a{
    font-size: 12px;
    color: #0000ff;
    text-decoration: none;
  }
</style>
